<template>
    <div>
        <el-input v-model="supplierName" readonly @click="openDialog" placeholder="请选择供应商" style="width: 240px;">
            <template #append>
                <el-button icon="Close" @click.stop="clearSupplier" />
            </template>
        </el-input>

        <el-dialog title="选择供应商" v-model="dialogVisible" width="70%" top="10vh" append-to-body>
            <!-- 搜索区域 -->
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
                <el-form-item label="供应商编码" prop="code">
                    <el-input v-model="queryParams.code" placeholder="请输入编码" clearable @keyup.enter="handleQuery"
                        style="width: 200px;" />
                </el-form-item>
                <el-form-item label="供应商名称" prop="name">
                    <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter="handleQuery"
                        style="width: 200px;" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 表格展示 -->
            <el-table border v-loading="loading" :data="supplierList" highlight-current-row height="300px"
                @current-change="handleSelect" :row-key="row => row.id">
                <el-table-column label="供应商编码" align="center" prop="code" />
                <el-table-column label="供应商名称" align="center" prop="name" width="220px" show-overflow-tooltip />
                <el-table-column label="供应商分类" align="center" prop="categoryName" show-overflow-tooltip />
                <el-table-column label="启用状态" align="center" prop="supplierStatus">
                    <template #default="scope">
                        <dict-tag :options="sys_enable" :value="scope.row.supplierStatus" />
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
            </el-table>

            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />

            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmSelect" :disabled="!selected">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { listSupplier } from '@/api/finance/supplier'

// 双向绑定字段
const supplierId = defineModel<number | string>('supplierId')
const supplierName = defineModel<string>('supplierName')

watch(supplierId, (val) => {
  if (!val) {
    supplierName.value = ''
    selected.value = null
  }
})

const props = defineProps({
  type: {
    type: String,
    default: 'form'
  }
})


// 状态变量
const dialogVisible = ref(false)
const loading = ref(false)
const supplierList = ref([])
const total = ref(0)
const selected = ref(null)

// 查询参数
const queryParams = ref({
    pageNum: 1,
    pageSize: 50,
    code: '',
    name: '',
    supplierStatus: 1
})

const { proxy } = getCurrentInstance()
const { sys_enable } = proxy.useDict('sys_enable')

// 获取供应商列表
const getList = async () => {
    loading.value = true
    try {
        if (props.type === 'query') {
            delete queryParams.value.supplierStatus
        }
        const res = await listSupplier(queryParams.value)
        supplierList.value = res.rows || []
        total.value = res.total || 0
    } finally {
        loading.value = false
    }
}

const handleQuery = () => {
    queryParams.value.pageNum = 1
    getList()
}

const resetQuery = () => {
    queryParams.value = {
        pageNum: 1,
        pageSize: 50,
        code: '',
        name: '',
        supplierStatus: 1
    }
    handleQuery()
}

const handleSelect = (row) => {
    selected.value = row
}

const confirmSelect = () => {
    if (selected.value) {
        supplierId.value = selected.value.id
        supplierName.value = selected.value.name
        dialogVisible.value = false
    }
}

const openDialog = async () => {
    await getList()
    dialogVisible.value = true
}
const clearSupplier = () => {
    supplierId.value = null
    supplierName.value = ''
    selected.value = null
}

</script>
